<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>认领物品</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            overflow-x: hidden;
        }
        #sidebar {
            min-height: 100vh;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
        }
        .main-content {
            margin-left: 0;
            transition: margin-left 0.3s;
            position: relative;
            z-index: 1;
        }
        @media (min-width: 768px) {
            .main-content {
                margin-left: 25%;
            }
        }
        @media (min-width: 992px) {
            .main-content {
                margin-left: 16.666667%;
            }
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边导航栏 -->
            <div th:replace="fragments/sidebar :: sidebar"></div>

            <!-- 主内容区域 -->
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2>认领物品</h2>
                    <a th:href="@{/lost-item/list}" class="btn btn-outline-secondary">返回列表</a>
                </div>

                <!-- 物品信息 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title mb-0">物品信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <strong>物品标题：</strong>
                                    <span th:text="${lostItem.title}"></span>
                                </div>
                                <div class="mb-3">
                                    <strong>物品分类：</strong>
                                    <span th:text="${lostItem.category}"></span>
                                </div>
                                <div class="mb-3">
                                    <strong>丢失地点：</strong>
                                    <span th:text="${lostItem.location}"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <strong>提交时间：</strong>
                                    <span th:text="${#temporals.format(lostItem.submitTime, 'yyyy-MM-dd HH:mm')}"></span>
                                </div>
                                <div class="mb-3">
                                    <strong>状态：</strong>
                                    <span class="badge bg-success">待认领</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <strong>物品描述：</strong>
                            <div class="border rounded p-3 mt-2">
                                <span th:text="${lostItem.description}"></span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 认领表单 -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">认领信息</h5>
                    </div>
                    <div class="card-body">
                        <form th:action="@{/claim-record/claim}" method="post">
                            <input type="hidden" name="itemId" th:value="${lostItem.id}">
                            
                            <div class="mb-3">
                                <label for="claimer" class="form-label">认领人姓名</label>
                                <input type="text" class="form-control" id="claimer" name="claimer" required 
                                       placeholder="请输入认领人姓名">
                            </div>

                            <div class="mb-3">
                                <label for="contact" class="form-label">联系方式</label>
                                <input type="text" class="form-control" id="contact" name="contact" required 
                                       placeholder="请输入联系方式（手机号/微信号等）">
                                <div class="form-text">请提供有效的联系方式，以便核实认领信息</div>
                            </div>

                            <div class="alert alert-warning">
                                <i class="bi bi-exclamation-triangle me-2"></i>
                                <strong>注意：</strong>认领操作将更新物品状态为"已认领"，此操作不可逆。请确认认领人信息准确无误。
                            </div>

                            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                <a th:href="@{/lost-item/list}" class="btn btn-secondary me-md-2">取消</a>
                                <button type="submit" class="btn btn-primary">确认认领</button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 错误提示 -->
                <div th:if="${error}" class="alert alert-danger mt-3" role="alert">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    <span th:text="${error}"></span>
                </div>
            </main>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>